<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.grid.Grid in Layout Demo</title>
	<style type="text/css">
		@import "../resources/Grid.css";
		@import "../resources/tundraGrid.css";
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dijit/tests/css/dijitTests.css";

		html, body{	
			width: 100%;	/* make the body expand to fill the visible window */
			height: 100%;
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			overflow: hidden;
		}
		.dijitSplitPane{
			margin: 5px;
		}
		
		/* make grid containers overflow hidden */
		body .dijitContentPane {
			overflow: hidden;
		}
		#rightPane {
			margin: 0;
		}
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: false"></script>

	<script type="text/javascript">
		dojo.require("dijit.dijit");
		dojo.require("dijit.layout.LayoutContainer");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.LinkPane");
		dojo.require("dijit.layout.SplitContainer");
		dojo.require("dijit.layout.TabContainer");
		
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojo.data.ItemFileWriteStore");
		
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>
	<script type="text/javascript" src="support/test_data.js"></script>
	<script type="text/javascript">
		var layout = [[
			{name: 'Column 1', field: 'col1'},
			{name: 'Column 2', field: 'col2'},
			{name: 'Column 3', field: 'col3'},
			{name: 'Column 4', field: 'col4', width: "150px"},
			{name: 'Column 5', field: 'col5'}
		],[
			{name: 'Column 6', field: 'col6'},
			{name: 'Column 7', field: 'col7'},
			{name: 'Column 8'},
			{name: 'Column 9', field: 'col3', colSpan: 2}
		]];
		var layout2 = [
			{name: 'Alpha', field: 'col1'},
			{name: 'Beta', field: 'col2'},
			{name: 'Gamma', field: 'col3'},
			{name: 'Delta', field: 'col4', width: "150px"},
			{name: 'Epsilon', field: 'col5'},
			{name: 'Nexilon', field: 'col6'},
			{name: 'Zeta', field: 'col7'},
			{name: 'Eta', field: 'col1'},
			{name: 'Omega', field: 'col8'}
		];
	</script>
</head>
<body class="tundra">
	<div id="outer" dojoType="dijit.layout.LayoutContainer"
		style="width: 100%; height: 100%;">
		
		<div id="topBar" dojoType="dijit.layout.ContentPane" layoutAlign="top"
			style="background-color: #274383; color: white; height:100px">
			top bar
		</div>
		<div id="bottomBar" dojoType="dijit.layout.ContentPane" layoutAlign="bottom"
			style="background-color: #274383; color: white;">
			bottom bar
		</div>

		<div id="grid1" dojoType="dojox.grid.DataGrid" store="test_store" 
			structure="layout" layoutAlign="client"></div>
	</div>
</body>
</html>
